<template>
  <div>
    <el-card class="box-card">
      <div class="searchBox">
        <el-input placeholder="请输入订单编号" v-model="orderNumber" class="searchInput">
          <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="search()">搜索</el-button>
        </el-input>
      </div>
      <el-table :data="tableData" stripe class="orderTable">
        <el-table-column prop="orderNumber" label="订单编号" align="center" style="width:25%">
        </el-table-column>
        <el-table-column prop="roomCount" label="客房数量" align="center" style="width:15.5%">
        </el-table-column>
        <el-table-column prop="showCount" label="已展示次数" align="center" style="width:15.5%">
        </el-table-column>
        <el-table-column prop="showDate" label="已展示时长（天）" align="center" style="width:15.5%">
        </el-table-column>
        <el-table-column prop="amount" label="已话费金额（元）" align="center" style="width:15.5%">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" style="width:13%">
          <template slot-scope="scope">
            <span class="status1" v-if="scope.row.status==1">创建中</span>
            <span class="status2" v-if="scope.row.status==2">待审核</span>
            <span class="status3" v-if="scope.row.status==3">未通过</span>
            <span class="status4" v-if="scope.row.status==4">待投放</span>
            <span class="status5" v-if="scope.row.status==5">投放中</span>
            <span class="status6" v-if="scope.row.status==6">已完成</span>
            <span class="status7" v-if="scope.row.status==7">待充值</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNumber: "",
      totalCount:1000,
      pageSize: 20,
      tableData: [
        {
          orderNumber: "in3455656345234543444",
          roomCount: 44,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 1
        },
        {
          orderNumber: "in3455656345234543444",
          roomCount: 45,
          showCount: 45,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 2
        },

        {
          orderNumber: "in3455656345234543444",
          roomCount: 45,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 3
        },
        {
          orderNumber: "in3455656345234543444",
          roomCount: 34,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 4
        },
        {
          orderNumber: "in3455656345234543444",
          roomCount: 34,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 5
        },
        {
          orderNumber: "in3455656345234543444",
          roomCount: 34,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 6
        },
        {
          orderNumber: "in3455656345234543444",
          roomCount: 34,
          showCount: 25,
          showDate: 16,
          amount: 1200.0,
          submitTime: "2018-09-25 12:22",
          status: 7
        }
      ]
    }
  },
  methods: {
    search() {
      console.log(this.orderNumber)
    },
    SizeChange(){

    },
    CurrentChange(){

    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

